<template>
	<view>
		<view class="image-view" :style="{height: pageHeight + 'px'}">
			<!-- <view class="image-view-loading-view">
				
			</view> -->
			<image class="image-view-content" :src="shareImageUrl" mode="aspectFit" ></image>
		</view>
		<view class="popUp-button-view" :style="{paddingBottom: safeAreaBottomHeight}">
			<button class="popUp-button-view-item" style="float: left;" open-type="share">
				<image class="popUp-button-view-item-image" src="../../static/index/wechat.png" mode="aspectFit"></image>
				<view class="popUp-button-view-item-title util-font-medium">分享好友</view>
			</button>
			<view class="popUp-button-view-item" style="float: right;" @click="saveImage">
				<image class="popUp-button-view-item-image" src="../../static/index/save_to_image.png" mode="aspectFit"></image>
				<view class="popUp-button-view-item-title util-font-medium">保存海报</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			pageHeight(){
				return this.$util.systemRect().windowHeight - this.$util.systemRect().safeAreaBottomHeight - uni.upx2px(300)
			},
			pageWidth(){
				return this.pageHeight * 750.0 / 1334.0
			},
			safeAreaBottomHeight(){
				return this.$util.systemRect().safeAreaBottomHeight + 'px'
			},
			popUpImageUrl(){
				return this.$baseUrl + 'app/appBanner/inviteLowLevelPoster/' + uni.getStorageSync('appId')
			}
		},
		data() {
			return {
				userInfo: null,
				shareData: null,
				shareImageUrl: null
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			this.shareData = this.$util.JSEncode(JSON.stringify({IUID:this.userInfo.id}))
			this.shareImageUrl = this.$baseUrl + 'app/appBanner/inviteLowLevelPoster/' + uni.getStorageSync('appId') + '?' + encodeURI('scene=' + this.shareData + '&url=https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/invitationPoster.jpg' + '&headimgUrl=' + this.userInfo.headimgurl)
			
			console.log(this.shareImageUrl)
		},
		methods: {
			saveImage: function() {
				var that = this
				
				if (!this.isLogin()) {
					this.reg()
				}
				
				var filePath = wx.env.USER_DATA_PATH + '/tmpFile.png'
				uni.showLoading()
				uni.downloadFile({
					url: that.shareImageUrl,
					header: {
						'Content-Type': 'application/jpeg'
					},
					filePath: filePath,
					success: function(res) {
						console.log(res)
						uni.saveImageToPhotosAlbum({
							filePath: filePath,
							success() {
								uni.showModal({
									content: '海报已保存到您的相册',
									showCancel: false
								});
							},
							complete() {
								uni.hideLoading()
							}
						})
					},
					fail: function() {
						uni.hideLoading()
					}
				})
			},
		},
		onShareAppMessage() {
			var that = this
			return {
				title: "向你推荐【"+that.appName+"】吃饭省钱！分享赚钱！一起玩耍起来",
				path: '/pages/index/index?IUID=' + that.userInfo.id,// IUID means invite user id
				imageUrl: "https://tanmyan.oss-cn-zhangjiakou.aliyuncs.com/web/forwardHomepage.jpg",
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
	.image-view {
		width: 100%;
	}
	.image-view-content {
		margin-top: 60rpx;
		width: 100%;
		height: 100%;
		background: url(../../static/loading.gif) no-repeat center;
		position: relative;
		background-size: 150rpx 150rpx;
	}
	
	.popUp-button-view {
		width: 100%;
		height: 180upx;
		position: absolute;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
	}
	/* .image-view-loading-view {
		background-color: white;
		display: flex;
		justify-content: space-around;
		width: 200rpx;
		height: 200rpx;
		border-radius: 30rpx;
	} */
	
	.popUp-button-view-item {
		width: 200upx;
		height: 180upx;
		text-align: center;
	}
	
	.popUp-button-view-item-image {
		width: 80upx;
		height: 80upx;
		margin-top: 20upx;
	}
	
	.popUp-button-view-item-title {
		width: 200upx;
		height: 50upx;
		line-height: 50upx;
		font-size: 28upx;
		color: #333333;
	}
	
	button {
		border-radius: 0;
		padding-left: 0;
		padding-right: 0;
	}
	
	button.popUp-button-view-item {
		background-color: rgba(0, 0, 0, 0);
		line-height: 40upx;
		position: relative;
		margin: 0;
	}
	
	button::after {
		border: 0upx;
	}
</style>
